import React, { useEffect, useState } from 'react';
import InputColor from 'react-input-color';
import './index.scss';

interface IVColorPockerProps {
  value: string;
  onChange: (color: string) => void;
}

const defaultColors = [
  '#FFF',
  '#F5222D',
  '#FA541C',
  '#FADB14',
  '#52C41A',
  '#1890FF',
  '#722ED1',
  '#8C8C8C',
  '#000000',
  '#CCCCCC',
];
const VColorPicker: React.FC<IVColorPockerProps> = props => {
  const [color, setColor] = useState<string>(props.value || '#FFF');
  const onChangeColor = (color: string) => {
    setColor(color);
    props.onChange(color);
  };
  useEffect(() => {
    setColor(props.value);
  }, [props.value]);

  return (
    <div className="v-color-picker-wrapper">
      <div className="v-color-picker">
        <InputColor
          initialValue={color}
          onChange={color => onChangeColor(color.hex)}
        />
      </div>
      <ul className="default-color-picker">
        {defaultColors.map((co, index) => {
          return (
            <div
              className="color-item"
              style={{ backgroundColor: co }}
              key={index}
              onClick={() => onChangeColor(co)}
            ></div>
          );
        })}
      </ul>
    </div>
  );
};

export default VColorPicker;
